<template>
  <div>
    <!-- 专辑列表 -->
    <ul class="album-list">
      <li class="album-item" v-for="album in album_list" :key="album.id">
        <div class="all-img">
          <!-- 左边图片 -->
          <div
            class="left-img"
            :style="{ backgroundImage: `url(${album.info_obj[0].photo_url})` }"
          ></div>
          <!-- 右边图片 -->
          <div class="right-img">
            <div
              :style="{
                backgroundImage: `url(${album.info_obj[1].photo_url})`,
              }"
            ></div>
            <div
              :style="{
                backgroundImage: `url(${album.info_obj[2].photo_url})`,
              }"
            ></div>
          </div>
        </div>
        <div class="user-info">
          <!-- 信息 -->
          <div class="user">
            <p>{{ album.album_name }}</p>
            <p>
              {{ album.num }}张
              <i class="iconfont icon-xin"></i>
              {{ album.follow_num }}
            </p>
          </div>
          <!-- 分享 -->
          <div class="share">
            <i class="el-icon-share"></i>
          </div>
          <!-- 关注 -->
          <div class="follow">
            关注专辑
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["album_list"],
};
</script>

<style lang="scss" scoped>
.album-list {
  display: flex;
  flex-wrap: wrap;
  .album-item {
    position: relative;
    width: 24.6%;
    padding-top: 22%;
    background-color: #fff;
    margin: 0 0.2%;
    margin-bottom: 0.4%;
    border: 1px solid #eee;
    // 图片
    .all-img {
      position: absolute;
      left: 0;
      top: 4%;
      padding-top: 60%;
      width: 100%;
      .left-img {
        position: absolute;
        left: 3.5%;
        top: 0;
        width: 61%;
        height: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.3s;
        &:hover {
          transform: scale(1.03);
        }
      }
      .right-img {
        position: absolute;
        right: 3.5%;
        top: 0;
        width: 30%;
        height: 100%;
        div {
          cursor: pointer;
          position: absolute;
          left: 0;
          padding-top: 97%;
          width: 100%;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          transition: all 0.3s;
          &:hover {
            transform: scale(1.03);
          }
          &:first-child {
            top: 0;
          }
          &:last-child {
            bottom: 0;
          }
        }
      }
    }
    // 信息
    .user-info {
      position: absolute;
      top: 78%;
      left: 0;
      width: 100%;
      font-size: 13px;
      .user {
        position: absolute;
        left: 3.5%;
        top: 0;
        width: 45%;
        p {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: 1.4;
          i {
            font-weight: bold;
            margin-left: 15px;
            color: #e46554;
          }
        }
      }
      .share {
        text-align: center;
        i {
          color: #292a2a;
        }
      }
      .follow {
        position: absolute;
        top: 0;
        right: 3.5%;
        width: 73px;
        height: 30px;
        border: 1px solid #aeabab;
        color: #aeabab;
        text-align: center;
        line-height: 30px;
        border-radius: 30px;
        cursor: pointer;
        &:hover {
          border-color: $mainColor;
          color: $mainColor;
        }
      }
    }
  }
}
</style>
